<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span>本日汇总</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
              <div id="chartPieDay" class="pie-wrap"></div>
            <table cellspacing="0" style="width: 100%;">

              <tbody>

                <tr>

                  <td><div class="cell">总流水</div></td>
                  <td><div class="cell" >{{dayTurnover}}元</div></td>
                  <td><div class="cell">订单数量</div></td>
                  <td><div class="cell">{{dayOrderNum}}</div></td>
                  <td><div class="cell">售出商品</div></td>
                  <td><div class="cell">{{dayProductNum}}件  <el-button @click="getProductDetailList('day')">查看详情</el-button></div></td>
                  <td><div class="cell">平均订单流水</div></td>
                  <td><div class="cell" >{{dayAvaTurnover}}元</div></td>
                </tr>

              </tbody>
            </table>
          </div>
        </el-card>

      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span>本月汇总</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
              <div id="chartPieMonth" class="pie-wrap"></div>
            <table cellspacing="0" style="width: 100%;">
              <tbody>
                <tr>
                  <td><div class="cell">总流水</div></td>
                  <td><div class="cell" >{{monthTurnover}}元</div></td>
                  <td><div class="cell">订单数量</div></td>
                  <td><div class="cell">{{monthOrderNum}}</div></td>
                  <td><div class="cell">售出商品</div></td>
                  <td><div class="cell">{{monthProductNum}}件  <el-button @click="getProductDetailList('month')">查看详情</el-button></div></td>
                  <td><div class="cell">平均订单流水</div></td>
                  <td><div class="cell" >{{monthAvaTurnover}}元</div></td>
                </tr>

              </tbody>
            </table>
          </div>
        </el-card>

      </el-col>
    </el-row>
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="支付类型" prop="paymentType">
        <el-select v-model="queryParams.paymentType" placeholder="请选择支付类型" clearable size="small">
          <el-option
            v-for="dict in paymentTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker clearable size="small"
          v-model="queryParams.createTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="用户id" prop="userId">
        <el-input
          v-model="queryParams.userId"
          placeholder="请输入用户id"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="买家留言" prop="buyerMessage">
        <el-input
          v-model="queryParams.buyerMessage"
          placeholder="请输入买家留言"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="买家昵称" prop="buyerNick">
        <el-input
          v-model="queryParams.buyerNick"
          placeholder="请输入买家昵称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="收货人手机" prop="receiverMobile">
        <el-input
          v-model="queryParams.receiverMobile"
          placeholder="请输入收货人手机"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发票类型" prop="invoiceType">
        <el-select v-model="queryParams.invoiceType" placeholder="请选择发票类型" clearable size="small">
          <el-option
            v-for="dict in invoiceTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="订单来源" prop="sourceType">
        <el-select v-model="queryParams.sourceType" placeholder="请选择订单来源" clearable size="small">
          <el-option
            v-for="dict in sourceTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态" prop="sourceType">
        <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable size="small">
          <el-option
            v-for="dict in orderStatusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="团长id" prop="merchantsId">
        <el-input
          v-model="queryParams.merchantsId"
          placeholder="请输入团长id"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
    <!--  <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['youxuan:order:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['youxuan:order:edit']"
        >修改</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['youxuan:order:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['youxuan:order:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="订单id" align="center" prop="orderId" />
      <el-table-column label="总金额" align="center" prop="totalPay" />
      <el-table-column label="实付金额" align="center" prop="actualPay" />
      <el-table-column label="支付类型" align="center" prop="paymentType" :formatter="paymentTypeFormat" />
      <el-table-column label="订单状态" align="center" prop="orderStatus" :formatter="orderStatusFormat" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户id" align="center" prop="userId" />
      <el-table-column label="买家留言" align="center" prop="buyerMessage" />
      <el-table-column label="买家昵称" align="center" prop="buyerNick" />
      <el-table-column label="收货人手机" align="center" prop="receiverMobile" />
      <el-table-column label="发票类型" align="center" prop="invoiceType" :formatter="invoiceTypeFormat" />
      <el-table-column label="订单来源" align="center" prop="sourceType" :formatter="sourceTypeFormat" />
      <el-table-column label="团长id" align="center" prop="merchantsId" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
        <!--  <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['youxuan:order:edit']"
          >修改</el-button> -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['youxuan:order:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
<el-dialog title="销售详情" :visible.sync="openDetail" width="500px" append-to-body>
  <el-table v-loading="loading" :data="productSaleList">
    <el-table-column label="商品id" align="center" prop="id" />
    <el-table-column label="商品名称" align="center" prop="title" />
    <el-table-column label="售卖数量" align="center" prop="num" />
     </el-table>
     <pagination
       v-show="total>0"
       :total="total_p"
       :page.sync="queryParams_p.pageNum"
       :limit.sync="queryParams_p.pageSize"
       @pagination="getproductSaleList"
     />
  </el-dialog>
    <!-- 添加或修改订单管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="总金额，单位为分" prop="totalPay">
          <el-input v-model="form.totalPay" placeholder="请输入总金额，单位为分" />
        </el-form-item>
        <el-form-item label="实付金额。单位:分。如:20007，表示:200元7分" prop="actualPay">
          <el-input v-model="form.actualPay" placeholder="请输入实付金额。单位:分。如:20007，表示:200元7分" />
        </el-form-item>
        <el-form-item label="支付类型" prop="paymentType">
          <el-select v-model="form.paymentType" placeholder="请选择支付类型">
            <el-option
              v-for="dict in paymentTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="parseInt(dict.dictValue)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户id" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入用户id" />
        </el-form-item>
        <el-form-item label="买家留言" prop="buyerMessage">
          <el-input v-model="form.buyerMessage" placeholder="请输入买家留言" />
        </el-form-item>
        <el-form-item label="买家昵称" prop="buyerNick">
          <el-input v-model="form.buyerNick" placeholder="请输入买家昵称" />
        </el-form-item>
        <el-form-item label="收货人手机" prop="receiverMobile">
          <el-input v-model="form.receiverMobile" placeholder="请输入收货人手机" />
        </el-form-item>
        <el-form-item label="发票类型" prop="invoiceType">
          <el-select v-model="form.invoiceType" placeholder="请选择发票类型">
            <el-option
              v-for="dict in invoiceTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="parseInt(dict.dictValue)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单来源" prop="sourceType">
          <el-select v-model="form.sourceType" placeholder="请选择订单来源">
            <el-option
              v-for="dict in sourceTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="parseInt(dict.dictValue)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="团长id" prop="merchantsId">
          <el-input v-model="form.merchantsId" placeholder="请输入团长id" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listOrder, getOrder, delOrder, addOrder, updateOrder, exportOrder,listProductDetail } from "@/api/youxuan/order";
import * as echarts from 'echarts';
require('echarts/theme/macarons');
export default {
  name: "Order",
  components: {
  },
  data() {
    return {
      chartPieDay: null,
      chartPieMonth: null,
      openDetail:false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      total_p:0,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      productSaleList:[],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单管理表格数据
      orderList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 支付类型字典
      paymentTypeOptions: [],
      orderStatusOptions:[],
      // 发票类型字典
      invoiceTypeOptions: [],
      // 订单来源字典
      sourceTypeOptions: [],
      monthProductNum:0,
      dayProductNum:0,
      dayTurnover:0,
      dayOrderNum:0,
      dayPayOrder:0,
      dayUnPayOrder:0,
      dayGetOrder:0,
      daySuccessOrder:0,
      dayCloseOrder:0,
      dayCommentOrder:0,
      dayAvaTurnover:0,
      monthUnPayOrder:0,
      monthGetOrder:0,
      monthSuccessOrder:0,
      monthCloseOrder:0,
      monthCommentOrder:0,
      monthTurnover:0,
      monthOrderNum:0,
      monthAvaTurnover:0,
      monthPayOrder:0,
      dayProductNum:0,
      monthProductNum:0,
      p:'day',
      // 查询参数
      queryParams_p: {
        day:null,
        month:null,
        pageNum: 1,
        pageSize: 10,
      },
      queryParams: {
        orderStatus:null,
        pageNum: 1,
        pageSize: 10,
        totalPay: null,
        actualPay: null,
        paymentType: null,
        createTime: null,
        userId: null,
        nowDay:null,
        nowMonth:null,
        buyerMessage: null,
        buyerNick: null,
        receiverMobile: null,
        invoiceType: null,
        sourceType: null,
        merchantsId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        totalPay: [
          { required: true, message: "总金额，单位为分不能为空", trigger: "blur" }
        ],
        actualPay: [
          { required: true, message: "实付金额。单位:分。如:20007，表示:200元7分不能为空", trigger: "blur" }
        ],
        paymentType: [
          { required: true, message: "支付类型不能为空", trigger: "change" }
        ],
        postFee: [
          { required: true, message: "邮费。单位:分。如:20007，表示:200元7分不能为空", trigger: "blur" }
        ],
        userId: [
          { required: true, message: "用户id不能为空", trigger: "blur" }
        ],
        buyerNick: [
          { required: true, message: "买家昵称不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
  this.getTotalResult();
    this.getList();
    this.getDicts("youxuan_order_status").then(response => {
      this.orderStatusOptions = response.data;
    });
    this.getDicts("youxuan_payment_type").then(response => {
      this.paymentTypeOptions = response.data;
    });
    this.getDicts("youxuan_invoice_type").then(response => {
      this.invoiceTypeOptions = response.data;
    });
    this.getDicts("youxuan_source_type").then(response => {
      this.sourceTypeOptions = response.data;
    });

  },
  mounted(){
   this.$nextTick(() => {
     this.drawPieChart();
     this.drawPieChart_1();
   })

  },


  methods: {
    getproductSaleList(){
      this.total_p=0;
      this.queryParams_p.day = null;
      this.queryParams_p.month = null;
      if(this.p == 'day'){
        this.queryParams_p.day = this.nowDay;
      }
      else if (this.p == 'month'){
        this.queryParams_p.month = this.nowMonth;
      }
      listProductDetail(this.queryParams_p).then(response => {
          this.productSaleList = response.rows;
          if(response.rows!= null){
            this.total_p = response.total;
          }
            else{
              this.total_p=0;
            }
          this.loading = false;
      });
    },
    getProductDetailList(option){
      this.openDetail = true;
      if(option == 'day'){
          this.p = 'day';
          this.getproductSaleList();
      }
      else if(option == 'month'){
        this.p = 'month';
        this.getproductSaleList();
      }

    },
    drawPieChart_1() {
           let mytextStyle = {
             color: "#333",
             fontSize: 18,
           };
           let mylabel = {
             show: true,
             position: "right",
             offset: [30, 40],
             formatter: '{b} : {c} ({d}%)',
             textStyle: mytextStyle
           };
           this.chartPieMonth = echarts.init(document.getElementById('chartPieMonth'),'macarons');


         },
          numFilter(value) {
               const realVal = parseFloat(value).toFixed(2);
               return realVal;
             },
 drawPieChart() {
        let mytextStyle = {
          color: "#333",
          fontSize: 18,
        };
        let mylabel = {
          show: true,
          position: "right",
          offset: [30, 40],
          formatter: '{b} : {c} ({d}%)',
          textStyle: mytextStyle
        };
        this.chartPieDay = echarts.init(document.getElementById('chartPieDay'),'macarons');


      },
    getTotalResult(){
      let that = this;
      let mytextStyle = {
        color: "#333",
        fontSize: 18,
      };
      let mylabel = {
        show: true,
        position: "right",
        offset: [30, 40],
        formatter: '{b} : {c} ({d}%)',
        textStyle: mytextStyle
      };
      let nowDate = new Date()
        let date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          date: nowDate.getDate(),
          day : nowDate.getDay()
        }
        var systemTime = date.year + '-' + 0 +date.month+'-'+date.day;
        var systemMonth = date.year + '-' + 0 +date.month;
        this.nowDay = systemTime;
        this.nowMonth = systemMonth;
      var queryParams =  {
       createTime: systemTime
      };
      var num = 0;
      listOrder(queryParams).then(response => {
        this.orderList = response.rows;
        if(response.rows.length != 0){
        this.orderList.forEach(o=>{
          that.dayOrderNum +=1;
          if(o.orderStatus == 2){
            that.dayPayOrder+=1;
            num+=1;
            o.actualPay /= 100;
            that.dayProductNum +=o.productNum;
            that.dayTurnover += o.actualPay;
          }
          else  if(o.orderStatus == 1){
            that.dayUnPayOrder+=1;
          }
          else  if(o.orderStatus == 3){
            that.dayGetPayOrder+=1;
            num+=1;
            o.actualPay /= 100;
            that.dayProductNum +=o.productNum;
            that.dayTurnover += o.actualPay;
          }
          else  if(o.orderStatus == 4){
            that.daySuccessOrder+=1;
            num+=1;
            o.actualPay /= 100;
            that.dayProductNum +=o.productNum;
            that.dayTurnover += o.actualPay;
          }
          else  if(o.orderStatus == 5){
            that.dayCloseOrder+=1;
          }
          else  if(o.orderStatus == 6){
            that.dayCommentOrder+=1;
          }

        })
         that.dayTurnover=that.numFilter(that.dayTurnover) ;
         that.dayAvaTurnover = that.numFilter(that.dayTurnover/that.numFilter(num));}
        console.log("or",that.dayCommentOrder)

        this.chartPieDay.setOption({
          title: {
            text: '订单详情',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            data: ['未付款', '已付款', '已发货', '交易成功', '已退款','取消订单'],
            left:"center",
            top:"bottom",
            orient:"horizontal",
          },
          series: [
            {
              name: '订单类型',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '50%'],
              data: [
                {value: that.dayUnPayOrder, name: '未付款'},
                {value: that.dayPayOrder, name: '已付款'},
                {value: that.dayGetOrder, name: '已发货'},
                {value: that.daySuccessOrder, name: '交易成功'},
                {value: that.dayCloseOrder, name: '已退款'},
                {value: that.dayCommentOrder, name: '取消订单'}
              ],
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              label: {
                emphasis: mylabel
              }
            }
          ]
        });

        this.loading = false;
      });
      var mnum=0;
      var queryParams_1 =  {
       createMonth: systemMonth
      };
      listOrder(queryParams_1).then(response => {
        this.orderList = response.rows;
        if(response.rows.length !=0 ){
        this.orderList.forEach(o=>{
          that.monthOrderNum +=1;
          if(o.orderStatus == 2){
            mnum+=1;
            that.monthProductNum +=o.productNum;
            o.actualPay /= 100;
            that.monthTurnover += o.actualPay;
            that.monthPayOrder +=1;

          }
          else  if(o.orderStatus == 1){
            that.monthUnPayOrder+=1;
          }
          else  if(o.orderStatus == 3){
            that.monthGetOrder+=1;
            mnum+=1;
            that.monthProductNum +=o.productNum;
            o.actualPay /= 100;
            that.monthTurnover += o.actualPay;
          }
          else  if(o.orderStatus == 4){
            that.monthSuccessOrder+=1;
            mnum+=1;
            that.monthProductNum +=o.productNum;
            o.actualPay /= 100;
            that.monthTurnover += o.actualPay;
          }
          else  if(o.orderStatus == 5){
            that.monthCloseOrder+=1;
          }
          else  if(o.orderStatus == 6){
            that.monthCommentOrder+=1;
          }

        })
        that.monthTurnover=that.numFilter(that.monthTurnover );
        that.monthAvaTurnover = that.numFilter(that.monthTurnover/mnum);}
        that.chartPieMonth.setOption({
             title: {
               text: '订单详情',
               x: 'center'
             },
             tooltip: {
               trigger: 'item',
               formatter: "{a} <br/>{b} : {c} ({d}%)",
             },
             legend: {
               data: ['未付款', '已付款', '已发货', '交易成功','已退款','取消订单'],
               left:"center",
               top:"bottom",
               orient:"horizontal",
             },
             series: [
               {
                 name: '订单类型',
                 type: 'pie',
                 radius: ['50%', '70%'],
                 center: ['50%', '50%'],
                 data: [
                   {value: that.monthUnPayOrder, name: '未付款'},
                   {value: that.monthPayOrder, name: '已付款'},
                   {value: that.monthGetOrder, name: '已发货'},
                   {value: that.monthSuccessOrder, name: '交易成功'},
                   {value: that.monthCloseOrder, name: '已退款'},
                   {value: that.monthCommentOrder, name: '取消订单'}
                 ],
                 animationEasing: 'cubicInOut',
                 animationDuration: 2600,
                 label: {
                   emphasis: mylabel
                 }
               }
             ]
           });
        this.loading = false;
      });

    },
    /** 查询订单管理列表 */
    getList() {
      this.loading = true;
      listOrder(this.queryParams).then(response => {
        this.orderList = response.rows;
        this.orderList.forEach(o=>{
          o.totalPay /= 100;
          o.actualPay /= 100;
        })
        this.total = response.total;
        this.loading = false;
      });
    },
    orderStatusFormat(row, column) {
      return this.selectDictLabel(this.orderStatusOptions, row.orderStatus);
    },
    // 支付类型字典翻译
    paymentTypeFormat(row, column) {
      return this.selectDictLabel(this.paymentTypeOptions, row.paymentType);
    },
    // 发票类型字典翻译
    invoiceTypeFormat(row, column) {
      return this.selectDictLabel(this.invoiceTypeOptions, row.invoiceType);
    },
    // 订单来源字典翻译
    sourceTypeFormat(row, column) {
      return this.selectDictLabel(this.sourceTypeOptions, row.sourceType);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        orderId: null,
        totalPay: null,
        actualPay: null,
        promotionIds: null,
        paymentType: null,
        postFee: null,
        createTime: null,
        shippingName: null,
        shippingCode: null,
        userId: null,
        buyerMessage: null,
        buyerNick: null,
        buyerRate: null,
        receiverState: null,
        receiverCity: null,
        receiverDistrict: null,
        receiverAddress: null,
        receiverMobile: null,
        receiverZip: null,
        receiver: null,
        invoiceType: null,
        sourceType: null,
        merchantsId: null,
        del: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.orderId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加订单管理";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const orderId = row.orderId || this.ids
      getOrder(orderId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改订单管理";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.orderId != null) {
            updateOrder(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addOrder(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const orderIds = row.orderId || this.ids;
      this.$confirm('是否确认删除订单管理编号为"' + orderIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delOrder(orderIds);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有订单管理数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportOrder(queryParams);
        }).then(response => {
          this.download(response.msg);
        })
    }
  }
};
</script>
<style>
    .pie-wrap{
        width:100%;
        height:300px;
    }
</style>
